<template>
	<view class="clockbox cal-content">
		<cu-custom :isBack="true" :isWhiteBack="true" >
		    <block slot="backText"></block>
		    <block slot="content">
		        <view class="custom-title">问卷</view>
		    </block>
		</cu-custom>
		<view class="edit_top">
		    <view class="tops">
		        <view>发起单位：{{detailInfo.unit}}</view>
		        <view>ID:{{detailInfo.code}}</view>
		    </view>
		    <view class="tops_title">{{detailInfo.title}}</view>
		    <view class="paratext">{{detailInfo.subtitle}}</view>
		    <view class="paratext_titmes">截止时间: {{detailInfo.end_time_text}}</view>
			<view class="tops_tip">
				<view class="tops_tip_left">
					<button class="not-show-but" type="default" open-type="share"></button>
					<view class="lefts"><image class="share_icon" src="https://txr001.zthj.net/voucher_img/share_icon.png"></image>分享</view>
				</view>
			</view>
		</view>
		<view class="edit_mian_box">
			<view class="formbox">
			    <show-res-form ref="show_res_form"
			                   :dataList="list"
			                   @resultDataSave="resDataSave"
			                   :resultData="resData" v-if="list.length > 0"
			    ></show-res-form>
			</view>
		</view>
	</view>
</template>

<script>
import showResForm from '../../components/diy-form/show-res-form.vue';

	export default {
		components: {
            showResForm
		},
		data() {
			return {
                join_id: 0,
                userInfo : {},
                list:[],
                createtime:'',
                resData:[],
				detailInfo:null
			}
		},
		onLoad(res) {
            this.join_id = res.join_id;
		    uni.setNavigationBarTitle({title: res.type==1?'已完成打卡':"问卷"})
            this.load()
		},
		methods:{
            resDataSave(saveData){
                this.resData = saveData;
            },
            async load(){
                let that = this;
                let res = await this.$api.getUserJoinInfo({
                    join_id: this.join_id
                });
                if(res.code == 1) {
                    if(res.data.formlist) that.list = JSON.parse(res.data.formlist)
                    if(res.data.endData) that.resData = JSON.parse(res.data.endData);
                    this.userInfo = res.data.userInfo;
                    this.createtime = res.data.createtime;
					this.detailInfo=res.data.info
                }else{
                    that.$api.msg(res.msg);
                }
            }

		   
		}
	}
</script>

<style lang="less" scoped>
	.clockbox{
		.clockbox_top{
			padding: 48rpx 0;
			display: flex;
			align-items: center;
			.imgs{
				width: 64rpx;
				height: 64rpx;
				border-radius: 100%;
				overflow: hidden;
				margin-right: 16rpx;
				image{
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.rights{
				flex: 1;
				view{
					&:first-child{
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #010101;
						line-height: 33rpx;
					}
					&:last-child{
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #767879;
						line-height: 28rpx;
						margin-top: 8rpx;
					}
				}
			}
		}
		.formbox{
			background: #FFFFFF;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			padding: 32rpx;
			.formli{
				margin-bottom: 48rpx;
				.titls{
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #010101;
					line-height: 50rpx;
					margin-bottom: 24rpx;
				}
				.forms{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #010101;
					line-height: 33rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.icons{
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}
					.formimg{
						width: 160rpx;
						height: 160rpx;
						margin-right: 16rpx;
						border-radius: 16rpx;
						overflow: hidden;
						image{
							width: 100%;
							height: 100%;
							display: block;
							background-color: red;
						}
					}
					
				}
			}
		}
	}
	.cal-content{
	    /deep/.cu-bar{
	        background-color: #4554C2;
	    }
	}
	.custom-title{
	    font-size: 34rpx;
	    font-family: PingFang SC, PingFang SC;
	    font-weight: 600;
	    color: #FFFFFF;
	}
	.edit_top{
	    padding-bottom: 200rpx;
	    padding-top: 32rpx;
	    background: #4554C2;
	    padding-bottom: 178rpx;
	    border-radius: 0rpx 0rpx 0rpx 0rpx;
	    opacity: 1;
	    padding-left: 32rpx;
		position: relative;
		.tops{
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    padding-right: 32rpx;
		    view{
		        font-size: 24rpx;
		        font-family: PingFang SC, PingFang SC;
		        font-weight: 400;
		        color: #FFFFFF;
		        line-height: 28rpx;
		        margin-bottom: 24rpx;
		    }
		}
		.tops_title{
		    font-size: 40rpx;
		    font-family: PingFang SC, PingFang SC;
		    font-weight: 600;
		    color: #FFFFFF;
		    line-height: 47rpx;
		    margin-bottom: 8rpx;
		}
		.paratext{
		    font-size: 24rpx;
		    font-family: PingFang SC, PingFang SC;
		    font-weight: 400;
		    color: #FFFFFF;
		    line-height: 32rpx;
		    margin-bottom: 32rpx;
		    padding-right: 32rpx;
		}
		.paratext_titmes{
		    height: 34rpx;
		    font-size: 24rpx;
		    font-family: PingFang SC, PingFang SC;
		    font-weight: 400;
		    color: #FFFFFF;
		    line-height: 28rpx;
		    margin-bottom: 24rpx;
		}
		.tops_tip{
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    margin-bottom: 24rpx;
		    padding-right: 32rpx;
			.tops_tip_left{
			    display: flex;
			    align-items: center;
			    position: relative;
				.not-show-but{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					margin: 0;
					opacity: 0;
					padding: 0;
				}
				.lefts{
				    padding: 12rpx 16rpx;
				    background: #FFFFFF;
				    border-radius: 27rpx 27rpx 27rpx 27rpx;
				    display: inline-flex;
				    align-items: center;
				    font-size: 24rpx;
				    font-family: PingFang SC, PingFang SC;
				    font-weight: 400;
				    color: #24458E;
				    .share_icon{
				        width: 32rpx;
				        height: 32rpx;
				        display: block;
				        margin-right: 8rpx;
				    }
				    .momo{
				        width: 40rpx;
				        height: 40rpx;
				        background: #D9DDDF;
				        border-radius: 100%;
				        margin-right: 8rpx;
				        margin-left: 8rpx;
				    }
				}
				button.lefts{
				    height:68rpx;
				}
			}
		}
	}
	.edit_mian_box{
		margin-top: -170rpx;
		position: relative;
		padding: 32rpx;
	}
</style>